<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="/common/css/mui.min.css" rel="stylesheet" />
		<style>
		    html{font-size:calc(100/1080*100vw);}
			#header{
				height: 1.6rem;
				background-color: #000000;
			}
			#header img{
				width: 0.72rem;
				margin-top: 0.44rem;
				margin-left: 0.72rem;
			}
			#header h1{
				color: #ffffff;
				font-size: 0.5rem;
				line-height: 1.6rem;
			}
			.kapian{
				width: 9.71rem;
				height: 6.34rem;
				background: #;
				background-image: url(/common/image/kapian@2x.png);
				margin-top: 1.5rem;
				margin-left: 0.54rem;
				background-size: 100%;
			}
			.mui-content{
				background: #FFFFFF;
			}
			.jindu{
				width: 5rem;
				text-align: center;
				height: 0.56rem;
				font-size: 0.6rem;
				margin: 0.8rem auto 0.2rem;
				
			}
			.minge{
				width: 5rem;
				text-align: center;
				height: 0.32rem;
				font-size: 0.3rem;
				margin: 0rem auto;
				
			}
			.huiji{
				width: 4.65rem;
				height: 2.65rem;
				float: left;
				border: 1px solid #DDDDDD;
				margin: 1rem 0.5rem 0rem 0.5rem;
				font-size: 0.6rem;
				line-height: 2.65rem;
				text-align: center;
				/*background:url(/common/image/xuanzhong@2x.png) no-repeat bottom right;*/ 
			}
			.huiji_1{
				width: 4.65rem;
				height: 2.65rem;
				float: left;
				border: 1px solid #DDDDDD;
				margin: 1rem 0.5rem 0rem 0rem;
				text-align: center;
				/*background:url(/common/image/xuanzhong@2x.png) no-repeat bottom right;*/ 
			}
			.active{
				background:url(/common/image/xuanzhong@2x.png) no-repeat bottom right;
				border: 2px solid #c1a32e;
			}
			.huiji_1 .huiji1{
				margin-top: 0.7rem;
				font-size: 0.6rem;
			}
			.huiji_1 .huiji2{ 
				margin-top: 0.1rem;
				font-size: 0.3rem;
			}
			.check{
				width: 8rem;
				font-size: 0.2rem;
				margin-left: 0.5rem;
			}
			.btn{
				width: 4rem;
				height: 1rem;
				margin: 1.5rem 0.5rem 1.5rem 1rem;
				background-color: #AAAAAA;
				font-size: 0.44rem;
				color: #DDDDDD;
				border-radius: 0.2rem;
			}
			.btn1{
				width: 4rem;
				height: 1rem;
				background-color: #111111;
				font-size: 0.44rem;
				margin: 1.5rem 0.5rem 1.5rem 0rem;
				color: #ffffff;
				border-radius: 0.2rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="header">
			<img src="/common/image/logo@2x.png" alt="LOGO"/>
			<h1 class="mui-title">BLACK CENTUEY</h1>
	    </header>
	    <div class="mui-content">
	    	<div class="kapian"></div>
	    	<div class="jindu">精英会籍申请</div>
	    	<div class="minge">Elites Member Application</div>
	    	<div class="huiji">
	    		随机选号
	    	</div>
	    	<div class="huiji_1">
	    		<div class="huiji1">自助选号</div>
	    		<div class="huiji2">不包含基本申请费用</div>
	    	</div>
	    	<div class="check"></div>
	    	<button class="btn">上一步</button>
		    <button class="btn1">下一步</button>
	    </div>
		<script src="/common/js/mui.min.js"></script>
		<script src="/home/js/jquery.js"></script>
		<script type="text/javascript">
			mui.init();
				
				var xiaoqie = true;
				var lulu = true;
				$( '.huiji' ).click( function() {
				
				    localStorage.setItem('xuanhao', 'suiji');
				
					if(xiaoqie == true){
						$( this ).addClass( 'active' );
						$('.check').html( '随机发卡号，建议您进行选号，可选择自己喜欢的卡号或高级卡号.' );
						if(lulu == false){
							$('.huiji_1').removeClass( 'active' );
						}
						xiaoqie = false;
						lulu = true;
						return;
                   }else{
                   	    $( this ).removeClass( 'active' );
                   	    $('.check').html( '' );
                   	    xiaoqie = true;
						return;
                    }
			    } )
				
				$( '.huiji_1' ).click( function() {
				
				    alert('暂时不支持自助选号，请随机选号');
					return;
					<!-- if(lulu == true){ -->
						<!-- $( this ).addClass( 'active' ); -->
						<!-- if(xiaoqie == false){ -->
							<!-- $('.huiji').removeClass( 'active' ); -->
							<!-- $('.check').html( '' ); -->
						<!-- } -->
						<!-- lulu = false; -->
						<!-- xiaoqie = true; -->
						<!-- return; -->
                   <!-- }else{ -->
                   	    <!-- $( this ).removeClass( 'active' ); -->
                   	    <!-- lulu = true; -->
						<!-- return; -->
                    <!-- } -->
			    } )
				
				//跳转申请页1
	      		mui('.btn')[0].addEventListener('tap',function(){
						mui.openWindow( {
						url: 'shenqing1.html',
						id: 'shenqing1'
					} )
				} )
	      		
	      		//跳转申请页3
	      		mui('.btn1')[0].addEventListener('tap',function(){
	      			    
	      			    if(lulu == true && xiaoqie == true){
	      			    	alert('请选择您喜欢的选卡方式！');
	      			    }else{
	      			    	mui.openWindow( {
								url: 'shenqing3.html',
								id: 'shenqing3'
					        } )	
	      			    }
				} )
		</script>
	</body>

</html>